<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和JS对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>

        JQ对数组操作非常方便！！
    单个玩就是js;数组玩就是JQ
<script>
    //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs);// [object HTMLCollection]
    alert(divs.length);//可以将其当做数组来使用

    //对divs中所有的div 让其标签体内容变为"aaa"
    for (var i = 0; i < divs.length; i++) {
        //divs[i].innerHTML = "aaa";
        $(divs[i]).html("ccc");
    }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs);// [object Object] 本质上也是数组
    alert($divs.length);//也可以当做数组使用

    //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
    // $divs.innerHTML = "bbb";

    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery对象在操作时，更加方便。直接设置，一步搞定！$divs.html("bbb");
        2. JQuery对象和js对象方法不通用的.--$divs.innerHTML = "bbb";不生效
        想通用怎么办？？如何互相调用对方方法？
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)--拿到object本质上也是数组,$divs[0].innerHTML = "ddd";
            * js -- > jq : $(js对象)---js对象想用JQ的强大功能，$(divs[i]).html("ccc");
            *
         单个玩就是js;数组玩就是JQ
     */

</script>
</body>
</html>